import React, {Component} from 'react';
import {StickyContainer, Sticky} from 'react-sticky';

import {NavBar, Tabs, Icon} from 'antd-mobile';
import './info.scss'

class SafeInfo extends React.Component {
    renderContent = tab => {

        if (tab.key === 1) {
            return (
                <div className={'img-warp'}>
                    <img width={'100%'} src={require('../../assets/img/guide/login.png')} alt=""/>
                </div>
            )
        } else if (tab.key === 2) {
            return (
                <div className={'img-warp'}>
                    <img width={'100%'} src={require('../../assets/img/guide/open.png')} alt=""/>
                </div>
            )
        }else if (tab.key === 3) {
            return (
                <div className={'img-warp'}>
                    <img width={'100%'} src={require('../../assets/img/guide/out.png')} alt=""/>
                </div>
            )
        }else if (tab.key === 4) {
            return (
                <div className={'img-warp'}>
                    <img width={'100%'} src={require('../../assets/img/guide/get.png')} alt=""/>
                </div>
            )
        }
    }
    onTabClick = (tab, index) => {
        console.log(index);
    }

    render() {
        const tabs = [
            {
                key: 1,
                title: '注册'
            },
            {
                key: 2,
                title: '开户'
            },
            {
                key: 3,
                title: '出借'
            },
            {
                key: 4,
                title: '提现'
            },
        ];

        const style = {
            tabBarInactiveTextColor: '#4e5259',
            tabBarTextStyle: {
                color: '#4e5259',
            },
            tabBarUnderlineStyle: {
                borderColor: '#f04349'
            },
            tabBarActiveTextColor: '#f04349',
            onTabClick: this.onTabClick
        }

        function renderTabBar(props) {
            return (<Sticky>
                {({style}) => <div style={{...style, zIndex: 1}}><Tabs.DefaultTabBar {...props} /></div>}
            </Sticky>);
        }

        const goBack = () => {
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if (isAndroid) {
                android.back()
            } else {
                var message = {"method": "back"};
                window.webkit.messageHandlers.ios.postMessage(message);
            }
        }
        return (
            <div style={{position: 'relative'}}>
                <NavBar mode="light"
                        onLeftClick={() => goBack()}
                        icon={<Icon type="left"/>}
                        className='title'>新手指南</NavBar>
                <StickyContainer>
                    <Tabs tabs={tabs} renderTabBar={renderTabBar} {...style} >
                        {this.renderContent}
                    </Tabs>
                </StickyContainer>
                {/*<div className={'tip'}>网贷有风险，出借须谨慎</div>*/}
            </div>
        );
    }
}

export default SafeInfo
